<template>
  <div class="releaseActivity">
    <el-card shadow="never" style="margin-top: 30px">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="活动发布" style="margin-bottom: 20px">
          </el-page-header>
        </div>
      </div>
      <div class="activityForm">
        <el-form :model="activityRuleForm" :rules="rules" ref="activityRuleForm" label-width="120px" class="demo-ruleForm" size="mini">
          <el-form-item label="活动名称" prop="activityTitle">
            <el-input v-model="activityRuleForm.activityTitle"></el-input>
          </el-form-item>
          <el-form-item label="活动类型" prop="activityType">
            <el-select v-model="activityRuleForm.activityType" placeholder="请选择活动类型">
              <el-option label="日常活动" value="1"></el-option>
              <el-option label="志愿者活动" value="0"></el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="活动内容" prop="activityContent">
            <el-input type="textarea" v-model="activityRuleForm.activityContent"></el-input>
          </el-form-item>-->
          <el-form-item label="活动内容" prop="tenderContent">
            <div style="border: 1px solid #ccc;">
              <Toolbar
                  style="border-bottom: 1px solid #ccc"
                  :editor="editor"
                  :defaultConfig="toolbarConfig"
                  :mode="mode"
              />
              <Editor
                  style="height: 400px; overflow-y: hidden;"
                  v-model="activityRuleForm.activityContent"
                  :defaultConfig="editorConfig"
                  :mode="mode"
                  @onChange="onChange"
                  @onCreated="onCreated"
              />
            </div>
          </el-form-item>

          <el-form-item label="活动地点" prop="activityPlace">
            <el-input v-model="activityRuleForm.activityPlace"></el-input>
          </el-form-item>
          <el-form-item label="活动人数" prop="activityHuman">
            <el-input-number v-model="activityRuleForm.activityHuman" @change="handleChange" :min="1" :max="200" label="描述文字"></el-input-number>
          </el-form-item>

          <el-form-item label="活动时间" prop="date1">
            <el-date-picker
                v-model="activityRuleForm.date1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="报名时间" prop="date2">
            <el-date-picker
                v-model="activityRuleForm.date2"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('activityRuleForm')">立即创建</el-button>
            <el-button @click="resetForm('activityRuleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>


    </el-card>
  </div>
</template>

<script>
import {addActivity, uploadImage} from "@/api/allApi";
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";

export default {
  name: "ReleaseActivity",
  components: {Editor, Toolbar},
  data() {

    // form表单自定义验证规则，开始时间不可大于结束时间
    var endTimeRules = (rule, value, callback) => {
        if(this.activityRuleForm.date1[0] < this.activityRuleForm.date2[1]){
          callback(new Error('活动开始时间不能在报名截止时间之前，请检查'));
        }else {
          callback();
        }
    }

    return {
      admin:'',
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          //配置上传图片
          uploadImage: {
            customUpload: this.uploadImg,
          },
        }
      },
      mode: 'simple', // or 'default'
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      activityRuleForm: {
        activityTitle: '',
        activityType: '',
        activityContent: '',
        activityPlace: '',
        date1: [],
        date2: [],
        activityStarttime:'',
        activityEndtime:'',
        activityBegintime:'',
        activityDeadline:'',
        activityHuman: 1,
      },
      rules: {
        activityTitle: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        activityContent: [
          { required: true, message: '请填写活动内容', trigger: 'change' }
        ],
        activityPlace: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { required: true, message: '请选择活动日期', trigger: 'change' },
        ],
        date2: [
          {required: true, message: '请选择填写日期', trigger: 'change' },
          {required: true, validator: endTimeRules, trigger: 'change' }
        ],
        activityType: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.admin = JSON.parse(window.localStorage.getItem('access-admin'))
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.toolbarConfig.excludeKeys = [
        'group-video'
      ]
    },
    onChange () {
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addActivity()
        } else {
          this.$message.error("请按要求发布！")
          return false;
        }
      });
      this.$refs[formName].resetFields();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();

    },
    handleChange(value) {
      // num

    },
    //上传图片
    uploadImg(file, insertFn) {
      //调接口，上传图片
      uploadImage({file: file}).then(res => {
        if (res.data.errno === 0) {
          insertFn(res.data.data.url);
          this.$message.success("上传成功")
        }
        else {
          this.$message.error("上传失败")
        }
      })
    },
    addActivity() {
      this.activityRuleForm.activityStarttime = this.activityRuleForm.date1[0]
      this.activityRuleForm.activityEndtime = this.activityRuleForm.date1[1]
      this.activityRuleForm.activityBegintime = this.activityRuleForm.date2[0]
      this.activityRuleForm.activityDeadline = this.activityRuleForm.date2[1]
      this.activityRuleForm.adminId = this.admin.adminId
      // 获取不带html标签的纯文本，存入数据库作为摘要
      this.activityRuleForm.activityDigest = this.editor.getText()
      addActivity(this.activityRuleForm).then(res=>{
        if (res.data.success){
          this.$message.success(res.data.data)
          this.activityRuleForm.activityContent=''
        }else{
          this.$message.error(res.data.errorMsg)
        }

      })
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style lang="less" scoped>
  .activityForm {
    width: 100%;
    padding: 30px;
    .timeForm {
      display: flex;
    }
  }
</style>